<template>
	<view class="content">
		<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30" @click="goUserInfo()">
			<view class="u-m-r-10">
				<u-avatar :src="userInfo && userInfo.avatar" size="140"></u-avatar>
			</view>
			<view class="u-flex-1">
				<view class="u-font-18 u-p-b-20">{{userInfo && userInfo.nickname}}</view>
				<view class="u-font-14 u-tips-color">简介:{{userInfo && userInfo.intro}}</view>
			</view>
			<view class="u-m-l-10 u-p-10">
				<u-icon name="scan" color="#969799" size="28"></u-icon>
			</view>
			<view class="u-m-l-10 u-p-10">
				<u-icon name="arrow-right" color="#969799" size="28"></u-icon>
			</view>
		</view>
		
		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="plus" title="创建群聊" @click="goCreatGroup()"></u-cell-item>
				<u-cell-item icon="chat-fill" title="加入群聊" @click="goJoinGroup()"></u-cell-item>
			</u-cell-group>
		</view>
		
		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="setting" title="系统设置" @click="goSetting()"></u-cell-item>
			</u-cell-group>
		</view>
		
		<u-popup mode="center" width="500rpx" height="350rpx" border-radius="20" v-model="joinGroupShow">
			<view class="pop-content">
				<view class="pop-title">加入群聊</view>
				<view class="pop-input">
					<u-input placeholder="请输入群id" v-model="groupId" type="text" :border="border"></u-input>
				</view>
				<view class="pop-btn">
					<u-button class="cancel" @click="joinGroupShow = false;">取消</u-button>
					<u-button class="confirm" @click="submit">加入</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { mapState, mapGetters, mapActions } from 'vuex'
	export default {
		data() {
			return {
				// data:{},
				joinGroupShow: false,
				border: true,
				groupId: '',
				needRefresh: false
			}
		},
		async created() {
			// await this.updateUserInfo()
		},
		computed: {
			...mapGetters(['isLogin']),
			...mapState(['userInfo'])
		},
		methods: {
			...mapActions(['updateUserInfo']),
			goUserInfo() {
				this.$u.route('/pages/me/userModify/userModify')
			},
			goSetting() {
				this.$u.route('/pages/me/setting/setting')
			},
			goCreatGroup() {
				this.$u.route('/pages/addressBook/createGroup/createGroup')
			},
			goJoinGroup() {
				this.joinGroupShow = true
			},
			async getGroupList() {
				let res = await this.$u.api.communityList()
				if (res != '') {
					let data = this.$utils.reduceData(res.data)
					uni.setStorageSync(this.$config.group_list_key, data);
				}
			},
			async submit() {
				if (!this.groupId) {
					this.$u.toast("请输入群聊id")
					return
				}
				this.groupId = parseInt(this.groupId)
				let res = await this.$u.api.joinCommunity({dstId:this.groupId})
				if (res != '') {
					this.$u.toast(res.message)
					this.getGroupList()
					setTimeout(() => {
						this.joinGroupShow = false
						this.groupId = ''
					}, 100)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
page{
	background-color: #ededed;
}
.user-box{
	background-color: #fff;
}
.u-m-r-10,.u-flex-1{
	padding-top: 10rpx;
}
.pop-content{
	padding: 30rpx;
	.pop-title {
		text-align: center;
		font-weight: bold;
	}
	.pop-input {
		margin-top: 40rpx;
	}
	.pop-btn{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 50rpx;
		button{
			width: 200rpx;
			height: 68rpx;
			line-height: 68rpx;
		}
		.confirm{
			background-color: rgb(255, 153, 0);
			color: #fff;
			border: none;
			&::after {
				border: none;
			}
		}
	}
}
</style>
